<template>
  <j-modal
    width="60%"
    title="账单列表"
    :maskClosable="false"
    :destroyOnClose="true"
    :fullscreen.sync="fullscreen"
    :switch-fullscreen="switchFullscreen"
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
  >
    <template slot="footer">
      <div style="text-align:right;">
        <a-button @click="handleCancleDbSync">关闭</a-button>
        <a-button type="primary" :loading="syncLoading" @click="handleDbSync">确定</a-button>
      </div>
    </template>
    <!-- table区域-begin -->
      <vxe-grid
        id="AutoAuditList"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :expand-config="{expandAll:true}"
        :columns="columns"
        :data="dataSource"
        :sort-config="{trigger:'cell',remote:true,defaultSort:defaultSort}"
        :edit-config="{trigger: 'click', mode: 'row',showStatus: true}"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @sort-change="onSortChange"
        @cell-dblclick="handleCellHblclick"
      >
      <template v-slot:toolbar_tools>
        <vxe-button style="margin-right:12px;" @click="handleExportXls('勾稽')" icon="vxe-icon--download" circle></vxe-button>
      </template>
      <template #action="{ row }">
        <template>
          <a @click="handleEdit(row)">修改</a>
        </template>
      </template>
      <template #content="{ row }">
        <div :style="{width:innerTableWidth}">
          <vxe-grid
            border
            resizable
            align="center"
            :key="row.id"
            ref="AutoAuditSubTable"
            :columns="subCol"
            :data="row.ysContactManagerList || [{}]"
          >
          </vxe-grid>
        </div>
      </template>
    </vxe-grid>
    <AuditListModal ref="modalForm" />
  </j-modal>
</template>

<script>

// import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { putAction, getAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import AuditListModal from './AuditListModal'
export default {
  name: 'AutoAuditList',
  // mixins: [VxeTableMixin],
  components: {
    AuditListModal
  },
  data() {
    return {
      fullscreen: true,
      switchFullscreen: true,
      columns: [
        { type: 'expand', width: 40, slots: { content: 'content' }},
        { type: 'seq', width: 40 },
        { title: '收支编码', field: 'accountCode', showOverflow: true },
        { title: '收支属性', field: 'cashType', showOverflow: true,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_type', row.cashType)
          } }},
        { title: '收支方式', field: 'cashMethod', showOverflow: true,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_method', row.cashMethod)
          } }},
        { title: '发生对象', field: 'xyParkOwner.ownerName' },
        { title: '收支账户', field: 'customerAccount', showOverflow: true },
        { title: '发生金额', field: 'amount', showOverflow: true },
        { title: '已匹配金额', field: 'b', showOverflow: true },
        { title: '未匹配金额', field: 'c', showOverflow: true },
        { title: '操作', width: 120, field: 'action', fixed: 'right', slots: { default: 'action' }}
      ],
      subCol: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '账单编号', field: 'billCode' },
        { title: '账单类型', field: 'billType', slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_bill_type', row.billType)
        } }},
        { title: '应收/应付日期', field: 'dueDate' },
        { title: '实收/实付', field: 'planTime' },
        { title: '账单金额', field: 'amount' },
        { title: '剩余金额', field: 'realityTime' },
        { title: '分配金额', field: 'assignment' },
        { title: '关联合同', field: 'contractCode' }
      ],
      dataSource: [{ id: 1 }, { id: 2 }],
      url: {
        list: '/community/cash/list',
        edit: '/ledgerScore/ysLedgerScore/edit',
        autoAmount: '/community/cash/autoAmount'
      },
      disableMixinCreated: true,
      innerTableWidth: 600,
      editModalVisible: false,
      arr: ['one', 'two', 'three', 'four']
    }
  },
  methods: {
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
    },
    show() {
      this.editModalVisible = true
      this.$nextTick(() => {
        const columns = this.$refs.vxeTable.getColumnByField('action')
        const tableWidth = this.$refs.vxeTable.$el.clientWidth
        this.innerTableWidth = (tableWidth - columns.width - 30) + 'px'
      })
    },
    loadData() {
      getAction(this.url.list).then(res => {
        // this.dataSource = []
      })
    },
    handleDbSync() {
      console.log(this.$refs['AutoAuditSubTable'])
      console.log(this.$refs.myDiv)
    }
  },
  created() {
    this.loadData()
  },
  mounted() {

  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
